@base-color: #33a9e5;
@line-color: #c5c5c5;
@font-color: #707070;
@font-sec-color: #9a9c9d;
@version: 20170802;

.font-dpr(@font-size) {
    font-size: @font-size;
    [data-dpr="2"] & {
        font-size: @font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: @font-size * 3;
    }
}

.retina-image(@background-image) {
  background-image: url("/img/@2x/@{background-image}?v=@{version}");
  background-size: 100% 100%;
  background-position:left top;
  background-repeat: no-repeat;

  @media only screen and (-webkit-min-device-pixel-ratio: 2.5),
  only screen and (min--moz-device-pixel-ratio: 2.5), 
  only screen and (-o-min-device-pixel-ratio: 5/2),
  only screen and (min-device-pixel-ratio: 2.5),
  only screen and (min-resolution: 240dpi),
  only screen and (min-resolution: 2.5dppx) {
    & {
      background-image: url("/img/@3x/@{background-image}?v=@{version}") !important;
    }
  }
}